const bundleJson = require('./bundle.json');
//  以插件名称作为i18n词条的命名空间
const pluginName = bundleJson.name
//  注册i18n词条
function registI18nResource(hpmApi) {
  const en = {
    description: "echo hello world in the terminal.",
    hello: "hello world."
  };
  const zh = {
    description: "在命令行中输出hello world。",
    hello: "你好，世界。"
  }
  hpmApi.i18n.addLocalization("en", en, { pluginName });
  hpmApi.i18n.addLocalization("zh", zh, { pluginName });
}

module.exports = (hpmApi) => {
  //  先注入i18n词条
  registI18nResource(hpmApi);
  //  注册命令
  hpmApi.registerCmd(
    'hello', 
    {
      description: hpmApi.i18n.getMessage(`${pluginName}.description`),
    },
    (...args) => {
      hpmApi.i18n.log(`${pluginName}.hello`);
    },
    false
  )
}

const bundleJson = require('./bundle.json')
// 注册路由到HPM_CLI_UI服务端
module.exports = (serverApi) => {
  const routes = {
    method: 'get',
    path: '/hello',
    async callback(req, res, next) {
      try {
        const result = {
          code: 200,
          status: 'success',
          message: 'hello, world!'
        };
        res.send(result);
      } catch (err) {
        next(err);
      }
    }
  }
  const routePath = '/hi'
  const routeId = bundleJson.name
  serverApi.registerRouter({ routes, routePath, routeId })
}

(function(){
  const {
    ClientAddonApi,
    addonEvent,    
  } = window.top.HPM_CLI_UI

  const registI18nResource = (name) => {
    const clientAddonApi = new ClientAddonApi();
    const zh_CN = {
      hello: '你好，世界。'
    }
  
    const en = {
      hello: 'hello,world.'
    }
  
    clientAddonApi.addLocalization('zh_CN', zh_CN, { pluginName: name });
    clientAddonApi.addLocalization('en', en, { pluginName: name });
  }

  addonEvent.subscribe('registered', name => {
    registI18nResource(name)
  })

})()


const {
  addonEvent,
  isDarkMode
} = window.top.HPM_CLI_UI

const getRequest = () => {
  fetch('/api/hi/hello').then(res => {
    console.log(res);
  })
}

// isDarkMode确认HPM_CLI_UI当前的主题
const render = () => {
  const htmlElm = document.getElementsByTagName('html')[0]
  isDarkMode ? htmlElm.classList.add('dark-mode') : htmlElm.classList.remove('dark-mode')
  // 发送请求
  getRequest();
}

/*提前订阅HPM_CLI_UI的主题切换事件，动态的给html标签添加dark-mode类*/
addonEvent.subscribe('themeChange', data => {
  document.getElementsByTagName('html')[0].className = data.isDarkMode ? 'dark-mode' : ''
}, true)

// info为插件的上下文
addonEvent.subscribe('addonLoaded', (info) => {
  console.log('已加载')
}, true)

addonEvent.subscribe('beforeAddonDestroy', (info) => {
  console.log('logic卸载')
}, true)

// 渲染页面
render();


html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  color: #000;
  background-color: #eaeaea;
}

/*通过.dark-mode类定义黑色主题下的addon样式*/
.dark-mode body {
  color: #fff;
  background-color: #2a2a2a;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

#app * {
  box-sizing: border-box;
}

#app h2 {
  font-size: 60px;
}

<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="26px" viewBox="0 0 25 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="#FFFFFF" fill-rule="evenodd" opacity="1">
        <g transform="translate(-30.000000, -306.000000)" fill-rule="nonzero">
            <g transform="translate(0.000000, 294.000000)">
                <g transform="translate(30.000000, 11.500000)">
                    <g transform="translate(0.001779, 0.004131)">
                        <g transform="translate(-0.001779, 1.496030)">
                            <rect opacity="0" x="0" y="0" width="24" height="24"></rect>
                            <path d="M22.9377558,2.20448915 L21.7942835,1.06137717 C21.7083861,0.979540942 21.5734035,0.979540942 21.4875061,1.06137717 L19.4351876,3.11362217 C18.5432171,2.50904102 17.4901495,2.18667789 16.4127106,2.18838709 C15.0322394,2.18838709 13.6517682,2.7146577 12.5972715,3.76879024 L9.85013379,6.51765872 C9.76701961,6.60215708 9.76701961,6.7377241 9.85013379,6.82222246 L17.1758254,14.1504436 C17.2187764,14.1934094 17.2724584,14.211831 17.3292141,14.211831 C17.3862612,14.2114933 17.4410647,14.1895605 17.4826027,14.1504436 L20.2304954,11.4016021 C22.056229,9.57294102 22.3308086,6.70660139 20.8854643,4.56437266 L22.9377558,2.51212766 C23.0207481,2.4266779 23.0207481,2.29069412 22.9377558,2.20524436 L22.9377558,2.20448915 Z M13.8028651,12.9367738 C13.7184811,12.852708 13.5820355,12.852708 13.4976515,12.9367738 L11.7030389,14.7327613 L9.26726217,12.2976808 L11.0657034,10.4986186 C11.1497581,10.4142024 11.1497581,10.2776889 11.0657034,10.1932727 L10.084032,9.21126231 C9.99956279,9.12811943 9.86404257,9.12811943 9.77957337,9.21126231 L7.98113215,11.0110797 L6.82229127,9.85113746 C6.78148613,9.81088596 6.72620133,9.78876052 6.66890259,9.78975001 C6.61163383,9.79010012 6.55659848,9.81201786 6.51475895,9.85113746 L3.76988607,12.5991968 C1.94388341,14.4277366 1.6693062,17.294288 3.11497112,19.4364262 L1.0626526,21.4893994 C0.979115798,21.5737242 0.979115798,21.7096384 1.0626526,21.7939632 L2.20612495,22.9371021 C2.2491029,22.9807962 2.30353984,23 2.3595406,23 C2.41674206,22.9997164 2.47165072,22.9774711 2.51292929,22.9378573 L4.56522084,20.8848571 C5.45717026,21.4894823 6.5102518,21.8118497 7.58769785,21.8100922 C8.96816906,21.8100922 10.3486403,21.2845499 11.4031369,20.2296621 L14.1503016,17.4815758 C14.2343384,17.3971627 14.2343384,17.26067 14.1503016,17.1762569 L12.9914607,16.0170158 L14.789147,14.2179266 C14.8731838,14.1335135 14.8731838,13.9970208 14.789147,13.9126077 L13.8028651,12.9367199 L13.8028651,12.9367738 Z" id="形状"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>